<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="../css/page/scenic.css" />
    <title>景区</title>
</head>

<body>
    <div class="page" @vue:mounted="mounted" style="background: #fff;">
        <div class="main-menu-box">
            <ul class="menu-list" @click='switchMenu'>
                <li data-tag="need" :class="{actived:data.orderName=='need'}">预约</li>
                <li data-tag="notneed" :class="{actived:data.orderName=='notneed'}">免预约</li>
            </ul>
            <span class="rule" @click="openRule">门票规则</span>
        </div>

        <div class="search_box">
            <img class="search_img" src="../images/main1/search.png" />
            <input type="text" class="input-search" v-model="data.searchKey" placeholder="请输入商品名称">
            <button class="btn-search" @click="searchNow">搜索</button>
        </div>

        <div class="hot-recommed scenic-section">
            <div class="box-recommed" id="boxRecommed">
                <div class="item" v-for="(item,index) of data.listRecommed" :key="index"
                    @click="core.tra.toDetail(item)">
                    <img :data-src="item.mainimage" src="../images/default.png" alt="0" />
                    <!-- <img :src="item.mainimage" @load="loadFinished($event.target,index,1)" @error="loadFinished($event.target,index,0)"/> -->
                    <div class="recomed-info">
                        <span class="title">{{item.scenicname}}</span>
                        <span> <i class="level"> 5A景区</i> <i class="type">人文景观</i></span>
                        <span class="address">{{item.scenicaddress}}</span>
                    </div>
                </div>
            </div>
            <div class="loading_more" id="loadDom" v-if="!data.isFinished"></div>
        </div>
    </div>

    <script src="../script/api.js"></script>
    <script src="../script/swiper-bundle.min.js"></script>
    <script src="../script/common.js"></script>
    <script type="module">
        import { createApp } from 'https://le.6gcc.com/app/web/script/pvue.js';
        const APP = () => {
            createApp({
                data: {
                    listRecommed: [],
                    pageIndex: 0,
                    pageSize: 10,
                    imgArrAll: [],
                    heightArr: [0, 0],
                    isLoadLen: 0,
                    isFinished: false,   // 所有页面是否加载完毕
                    orderName: 'need',
                    searchKey: ''
                },

                switchMenu(ev) {
                    let tag = ev.target.dataset.tag;
                    this.data.orderName = tag;
                    this.getRecommend('reset');
                },
                searchNow() {
                    this.getRecommend('reset');
                },
                touchBottom() {
                    let loadDom = document.getElementById('loadDom');
                    var observer = new IntersectionObserver(([entry]) => {
                        if (entry.isIntersecting) {
                            // 可见 ,加载更多
                            if (this.data.pageIndex > 0 && !this.data.isFinished) {
                                console.log('加载更多');
                                this.getRecommend();
                            }
                        }
                    })
                    observer.observe(loadDom);
                },
                // 图片懒加载
                loadCurretnImg() {
                    let imgAll = this.boxRecommed.querySelectorAll('img');

                    let observer = new IntersectionObserver((entrys) => {
                        entrys.forEach((entry) => {
                            if (entry.isIntersecting) {
                                let target = entry.target;
                                if (target.alt == '0') {
                                    target.src = target.dataset.src;
                                    target.alt = '1';
                                    let itemDom = entry.target.parentElement;
                                    this.isImageLoaded(target.src).then((res) => {
                                        this.loadFinished(itemDom, 1)
                                    }, (err) => {
                                        this.loadFinished(itemDom, 0)
                                    });
                                }

                            }
                        })
                    })
                    imgAll.forEach((imgDom) => {
                        observer.observe(imgDom);
                    })
                },
                resetLoadData() {
                    this.boxRecommed.style.height = 'auto';
                    this.data.listRecommed = [];
                    this.data.heightArr = [0, 0];
                    this.data.pageIndex = 0;
                    this.data.isLoadLen = 0;
                    this.data.isFinished = false;
                    this.data.imgArrAll = [];
                },
                isImageLoaded(url) {
                    return new Promise((resolve, reject) => {
                        var img = new Image();
                        img.onload = function (res) {
                            resolve(res)
                        };
                        img.onerror = function (res) {
                            reject(res);
                        };
                        img.src = url;
                    })

                },
                async getRecommend(kind) {
                    if (kind == 'reset') {
                        this.resetLoadData();
                    }
                    let pm = {
                        page: this.data.pageIndex,
                        pageSize: this.data.pageSize,
                        type: 'index',
                        search: this.data.searchKey
                    };
                    let res = await core.tra.lists(pm);
                    this.data.listRecommed = [...this.data.listRecommed, ...res.data.list];
                    this.data.pageIndex += 1;
                    let totalPage = Math.ceil(res.data.count / this.data.pageSize);
                    core.log('totalPage')
                    core.log(totalPage)
                    if (this.data.pageIndex >= totalPage) {
                        this.data.isFinished = true;
                    }
                    let maxHeight = Math.max(...this.data.heightArr);
                    this.boxRecommed.style.cssText += ';padding-top:' + maxHeight + 'px';
                    this.$nextTick(() => {
                        this.loadCurretnImg();
                    })
                },
                loadFinished(itemDom, kind) {

                    // 判断是否加载了真实的图片  
                    this.data.isLoadLen += 1;
                    let imgDom = itemDom.querySelector('img');
                    let height = itemDom.querySelector('img').height + itemDom.querySelector('.recomed-info').clientHeight;
                    this.data.imgArrAll = {
                        boxH: kind == 1 ? height + 20 : 200,
                        boxW: itemDom.clientWidth,
                        boxTarget: itemDom
                    }

                    const { boxTarget, boxW, boxH } = this.data.imgArrAll;
                    var minH = Math.min.apply(Math.min, this.data.heightArr);
                    var minHeightIndex = this.data.heightArr.indexOf(minH);

                    if (minHeightIndex == 0) {
                        boxTarget.style.cssText = `position: absolute;left:0px;opacity:1;top:${minH}px;height:${boxH}px;`
                    } else {
                        boxTarget.style.cssText = `position: absolute;right:0px;opacity:1;top:${minH}px;height:${boxH}px;`
                    }
                    //高度追加
                    this.data.heightArr[minHeightIndex] += boxH;

                    var maxH = Math.max.apply(Math.max, this.data.heightArr)

                    this.boxRecommed.style.cssText+= `;height:${maxH+20}px;padding-top:${maxH}px`;
                    let allLen = this.boxRecommed.querySelectorAll('img').length;
                    if (this.data.isLoadLen == allLen) {
                        this.boxRecommed.style.cssText += `;padding-top:0px`;
                    }
                },
                openRule() {
                    api.openWin({
                        name: 'rule',
                        url: './rule.html'
                    })
                },

                mounted() {
                    this.boxRecommed = document.getElementById('boxRecommed');
                    this.getRecommend();
                    this.touchBottom();

                }
            }).mount()
        }

        window.apiready = () => {
            $api.fixStatusBar($api.dom('.nav-bar'));
            APP();
            api.setStatusBarStyle && api.setStatusBarStyle({
                style: 'dark',
                color: '-'
            });
        }
    </script>


</body>

</html>